<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>维修保障设备</title>
		<link type="text/css" th:href="@{/css/style.css}" rel="stylesheet" />
		<link type="text/css" th:href="@{/css/animation.css}" rel="stylesheet" />
		<script type="text/javascript" th:src="@{/js/jquery.js}" ></script>
		<script type="text/javascript" th:src="@{/js/animation.js}"></script>
		<script type="text/javascript" th:src="@{/ietm/js/vue.min.js}"></script>
		<script type="text/javascript" th:src="@{/ietm/js/public.js}" ></script>
	</head>
	<body>
	<!-- 该页面是IETM主页面(一级，二级，三级数据均在该页面展示) -->
		<div class="logo-a"></div>
		<div th:include="header :: header"></div>
		<div class="container" id="container">
			<div class="interactive-l">
			  <div class="interactive-la">
				<ul>
					<li v-for="(ietm,index) in ietms1" :id="ietm.id" v-on:click="isActive1=index,click1(ietm.id,ietm.title)" :class="{ active: isActive1===index }">{{ietm.title}}</li>
				</ul>
			  </div>
			</div>
			<div class="interactive-r">
				<div class="interactive-ra">{{title}}</div>
				<div class="interactive-rb">
					<div class="interactive-rba">
						<ul>
							<li v-for="(ietm, index) in ietms2" :id="ietm.id" v-on:click="isActive2=index,click2(ietm.id)" :class="{ active: isActive2===index }">{{ietm.title}}</li>
						</ul>
					</div>
					<div class="interactive-rbb">
						<div class="interactive-rbba" style="display:block">
							<ul>
							    <li v-for="(ietm, index) in ietms3" :id="ietm.id" v-on:click="isActive3=index,click3(ietm.id)" :class="{ active: isActive3===index }"><span>{{ietm.title}}</span></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--导航栏隐藏-->
		<div class="nav-bottom-show"></div>
		<div class="nav-bottom-hide"></div>
		<div class="nav-bottom-content">
		    <ul>
		    	<a href="/index">
		    	<li>
		    		<img th:src="@{/images/nav-bottom-01.png}" />
		    		<p>主页</p>
		    	</li>
		    	</a>
		    	<a href="fitness.html">
		    	<li>
		    		<img th:src="@{/images/nav-bottom-07.png}" />
		    		<p>适用性</p>
		    	</li>
		    	</a>
		    	<a href="multimedia.html">
		    	<li>
		    		<img th:src="@{/images/nav-bottom-05.png}" />
		    		<p>多媒体</p>
		    	</li>
		    	</a>
		    	<a href="user-help.html">
		    	<li>
		    		<img th:src="@{/images/nav-bottom-04.png}" />
		    		<p>用户帮助系统</p>
		    	</li>
		    	</a>
		    	<a href="annotations.html">
		    	<li>
		    		<img th:src="@{/images/nav-bottom-03.png}" />
		    		<p>访问记录</p>
		    	</li>
		    	</a>
		    	<a href="ietm-log.html">
		    	<li>
		    		<img th:src="@{/images/nav-bottom-06.png}" />
		    		<p>日志管理</p>
		    	</li>
		    	</a>
		    </ul>
		</div>
		<script type="text/javascript" th:src="@{/ietm/js/interactive.js}"></script>
	</body>
</html>
